<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title>紧急救援</title>
 	<link rel="stylesheet" href="../components/bootstrap/dist/css/bootstrap.min.css">  
	<link rel="stylesheet" href="../components/datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../components/bootstrapValidator/css/bootstrapValidator.css" type="text/css" />
	<script type="text/javascript" src="../components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../components/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../components/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script src="../components/bootstrapValidator/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="../js/common/common.js"></script>
    <script type="text/javascript" src="../js/common/wechatCommon.js"></script>
    
    <script type="text/javascript" src="../components/hammer/hammer.min.js"></script>
    <script type="text/javascript" src="../components/hammer/jquery.hammer.js"></script>
    
	<script type="text/javascript" src="../js/maintain/sosHelp.js"></script>
	
	<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
	<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>


<style type="text/css">
.placeholders {
	margin-bottom: 30px;
	text-align: center;
}

.placeholders h4 {
	margin-bottom: 0;
}

.placeholder {
	margin-bottom: 20px;
}

.placeholder img {
	display: inline-block;
	border-radius: 50%;
}

.underline_model {
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
}

.center-vertical {
	margin-top: 25px;
}

html, body {
	width: 100%;
	height: 100%;
}

* {
	margin: 0px;
	padding: 0px;
}

#container {
	min-width: 100%;
	min-height: 10%;
}

/* .carousel-control.left {
	background-image: linear-gradient(to right, rgba(0, 0, 0, .0) 0,
		rgba(0, 0, 0, .0001) 100%);
}

.carousel-control.right {
	background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0,
		rgba(0, 0, 0, .0) 100%);
} */


#dealerList {
    padding: 0 10px 30px 10px;
    margin-top: 10px;
    /* Control buttons  */
    /* Previous button  */
    /* Next button  */
    /* Changes the position of the indicators */
    /* Changes the color of the indicators */
}

#dealerList .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
#dealerList .carousel-control.left {
    left: -60px;
}
#dealerList .carousel-control.right {
    right: -60px;
}
#dealerList .carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-right: -19px;
}
#dealerList .carousel-indicators li {
    width: 20px;
    height: 20px;
    margin: 5px;
    cursor: pointer;
    border: 4px solid #CCC;
    border-radius: 20px;
    opacity: 0.4;
    overflow: hidden;
    transition: all 0.4s;
}
#dealerList .carousel-indicators .active {
    background: #333333;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border-color: #f33;
    opacity: 1;
    overflow: hidden;
}
.carousel-inner {
    min-height: 100px;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}

</style>


</head>
<body onload="init()">
	<p><p><p>
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="row ">
			<div class="col-xs-4 col-sm-4">
				<label>常用电话</label>
			</div>
			<div class="col-xs-8 col-sm-8" style="white-space:nowrap;">
			<a href="#" id=telPho ><span class="glyphicon glyphicon-earphone" tyle="color: rgb(255, 0, 0);"></span></a>
				<select id="insuranceList" onchange="setPhone()">
				</select>
			</div>
		</div>
	</div>
	
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="row ">
			<div class="col-xs-12 col-sm-12">
				<label>当前位置：</label><label id="localAddress"></label>
			</div>
		</div>
	</div>
	<!-- 地图 -->
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="row ">
			<div class="col-xs-12 col-sm-12">
				<div id="container"></div>

			</div>
		</div>
	</div>
	<p><p>
	<!-- 经销商列表 -->
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="row ">
			<div class="col-xs-12 col-sm-12">
				<div id="dealerList">
					
				</div>
			</div>
		</div>
	</div>
	<!-- 品牌服务救援电话 -->
	<p>
	<p>
	<p>


<script>
	var rootPath = getRootPath();
	var geocoder,map, marker,info ;
	
	var isBingCar = false;
	
	//定义坐标 

	function init() {

		var totalheight=$(window).height();
		$("#container").height(totalheight * 0.5);
		var myOptions = {
			zoom : 13,
			center :new qq.maps.LatLng(39.916527,116.397128)
		};
		map = new qq.maps.Map(document.getElementById("container"),
				myOptions);
	    info = new qq.maps.InfoWindow({map: map});
	}
			
			
/**
 * 取得用户是否绑定车辆
 */
 
	$.ajax({
        type:"GET", 
        url:rootPath+"/wechat/api/maintain/getBindCarInfos", 
        dataType:"json",      
        async: false,
        contentType:"application/json",               
        data:null, 
        success:function(data){ 
        	if (data.length==0){
        		isBingCar = false;
        	} else {
        		isBingCar = true;
        	}
        },
        error:function(data){
        	isBingCar = false;
        }
     });

	/**
	 * 取得保险公司信息
	 */
	$.ajax({    type : "GET",
				url : rootPath+"/wechat/api/maintain/getInsuranceList",
				dataType : "json",
				async : false,
				contentType : "application/json",
				data : null,
				success : function(data) {
					
					$.each(data,function(insuranceIndex, insuranceObj) {
						if (0==insuranceIndex){
							$("#telPho").attr("href","tel:"+insuranceObj.phone);
							$("#insuranceList").append("<option value='"+insuranceObj.phone+"' selected>"+insuranceObj.companyName +'   '+ insuranceObj.phone+"</option>");
						}
						$("#insuranceList").append("<option value='"+insuranceObj.phone+"' >"+insuranceObj.companyName +'   '+ insuranceObj.phone+"</option>");
					});
				},
				error : function(data) {
					alert("获取保险公司出错！！");
				}
			});			
	
	// 定位经销商
	function to_dealer(lat,lng){
		 map.panTo(new qq.maps.LatLng(lat,lng));
	}
			
///////////////////////////////////////////////////////////////////////////////////////////
var geolocation = new qq.maps.Geolocation("HOZBZ-BDP3I-DLLGR-5AH5W-KLRIS-XDBPQ", "wx");
var options = {timeout: 8000};

 function showPosition(position) {
			          var latitude = position.lat;
			          var longitude = position.lng;
			          var latlng = new qq.maps.LatLng(latitude,longitude);
			          var address = position.province+position.city+position.addr;
			          
			          var reCode = position.adcode;
			          var code = reCode.substr(0,4)+'00';
			          alert(code);
			          
			          map.panTo(latlng);
				    	$("#localAddress").style='inline';
				    	$("#localAddress").text(address);
				        map.setCenter(latlng);
				        map.setZoom(13);
				        var marker = new qq.maps.Marker({
				            map:map,
				            position: latlng
				        });
	
				        //添加监听事件 当标记被点击了  设置图层
				        qq.maps.event.addListener(marker, 'click', function() {
				            info.open();
				            info.setContent('<div style="width:280px;height:100px;">'+
				            		address+'</div>');
				            info.setPosition(latlng);
				        });
			          
						
				    	$.ajax({
				            type:"GET", 
				            url:rootPath + "/wechat/api/maintain/sosHelpDealerList?lat="+latitude+"&lng="+longitude, 
				            dataType:"json",      
				            async: false,
				            contentType:"application/json",               
				            data:null, 
				            success:function(data){ 
				            	if (data.length==0){
				            		 alert("获取最近的经销出错！！");
				            		 return;
				            	}
				                // 编辑轮播信息数据
				    			var wholeHtml = '';
				    			// 轮播（Carousel）指标
				    			var carousel_indicatorsHtml = '<ol class="carousel-indicators">';
				    			
				    			// 轮播（Carousel）项目
				    			var carousel_innerHtml = '<div class="carousel-inner">';
				    			$.each(data,function(dealerIndex,dealerObj){
				    				
				    				var dealerLatlng = new qq.maps.LatLng(dealerObj.lat,dealerObj.lng);
				    				if (0 == dealerIndex){
				    				    carousel_indicatorsHtml+= '<li data-target="#dealerList" data-slide-to='+dealerIndex+' class="active"></li>';
				    				    carousel_innerHtml += "<div class='item active'>";
				    				} else {
				    					carousel_indicatorsHtml+= '<li data-target="#dealerList" data-slide-to='+dealerIndex+' ></li>';
				    					carousel_innerHtml += "<div class='item'>";
				    				}
				    				
				    				carousel_innerHtml += '<div class="row ">';
				    				carousel_innerHtml += '<div class="col-xs-6 col-sm-6">';
				    				carousel_innerHtml += '<a href="#" onclick = "to_dealer('+dealerObj.lat+','+dealerObj.lng+')" ><span class="glyphicon glyphicon-map-marker" style="color: rgb(0, 0, 255);">';
				    				carousel_innerHtml += dealerObj.dealerName;
				    				carousel_innerHtml += '</span> </a>';
				    				carousel_innerHtml += '</div>';
				    				carousel_innerHtml += '<div class="col-xs-6 col-sm-6 text-right">';
				    				if (isBingCar){
				    					carousel_innerHtml += '<a href="#" onclick="sendSos('+dealerObj.lat+','+dealerObj.lng+','+dealerObj.dealerCode+')"> <span class="glyphicon glyphicon-send" style="color: rgb(0, 0, 255);"> 发送位置</span></a>';
				    				} else {
				    					carousel_innerHtml += '<span class="glyphicon glyphicon-send" style="color: rgb(212, 208, 200);"> 发送位置</span>';
				    				}
				    				
				    				carousel_innerHtml += '</div></div>';
				    				carousel_innerHtml += '<div class="row "> <div class="col-xs-6 col-sm-6"> <label>';
				    				carousel_innerHtml += dealerObj.dealerAddress+' | 约'+dealerObj.distance + '米';
				    				carousel_innerHtml += '</label></div>';
				    				carousel_innerHtml += '	<div class="col-xs-6 col-sm-6 text-right">';
				    				carousel_innerHtml += '<a href="tel:'+dealerObj.sosTel+'"><label><span class="glyphicon glyphicon-earphone"	style="color: rgb(255, 0, 0);"></span>';
				    				carousel_innerHtml += dealerObj.sosTel;
				    				carousel_innerHtml += '<span></span></label></a></div></div></div>';
				    				
				    				// TODO 地图标记
				    				
				    		        var marker = new qq.maps.Marker({
				    		        	map:map,
				    		            position: dealerLatlng
				    		        });

				    		        //添加监听事件 当标记被点击了  设置图层
				    		        qq.maps.event.addListener(marker, 'click', function() {
				    		            info.open();
				    		            info.setContent('<div style="width:280px;height:100px;">'+
				    		            		dealerObj.dealerName+'</div>');
				    		            info.setPosition(dealerLatlng);
				    		        });
				    				
				    			});
				    			
				    			carousel_indicatorsHtml += "</ol> ";
				    			carousel_innerHtml += "</div>";
				    			
				    			$("#dealerList").append(carousel_indicatorsHtml + carousel_innerHtml );
				    			// 停止自动轮播
				    			$('#dealerList').carousel({
				    				interval: false
				    			})
				    			$("#dealerList").carousel('pause');
				    			
				    /////////////////////////////////////
				    			
				    			$('#dealerList').hammer().on('swipeleft', function(){
				    				$(this).carousel('next');
				    			});
				    			
				    			$('#dealerList').hammer().on('swiperight', function(){
				    				$(this).carousel('prev');
				    			});

				    ////////////////////////////////////
				            	
				            },
				            error:function(data){
				            	alert("获取最近的经销出错！！");
				            }
				         });
	
	 };

	  function showErr() {
	      alert("定位错误");
		 };
	// 获取定位信息
	geolocation.getLocation(showPosition, showErr, options);



</script>
</body>
</html>